<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col
        :span="24"
        :xs="24"
      >
        <!-- 数据筛选表单 -->
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="70px"
          class="form"
        >
          <!-- 数据筛选表单组件 -->
          <el-form-item
            :label="$t('logmanage.title')"
            prop="title"
          >
            <el-input
              v-model="queryParams.title"
              :placeholder="$t('logmanage.titleplaceholder')"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
           
          <el-form-item
            :label="$t('logmanage.type')"
            prop="businessType"
          >
            <el-input
              v-model="queryParams.businessType"
              :placeholder="$t('logmanage.typeplaceholder')"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item
            :label="$t('logmanage.method')"
            prop="requestMethod"
          >
            <el-input
              v-model="queryParams.requestMethod"
              :placeholder="$t('logmanage.requestplaceholder')"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
            
          <el-form-item
            :label="$t('logmanage.result')"
            prop="resultCode"
          >
            <el-input
              v-model="queryParams.resultCode"
              :placeholder="$t('logmanage.resultplaceholder')"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
            
          <!-- 数据筛选操作按钮 -->
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              style="margin-left:20px;"
            >
              {{ $t('query') }}
            </el-button>
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >
              {{ $t('reset') }}
            </el-button>
          </el-form-item>
        </el-form>
        <el-row
          :gutter="10"
          class="mb8"
        >
          <el-col :span="3">
            <el-button
              type="danger"
              icon="el-icon-delete"
              style="margin-left:20px;width:130px;"
              :disabled="multiple"
              @click="handleDelete"
            >
              {{ $t('deletemany') }}
            </el-button>
          </el-col>
        </el-row>
          
        <!-- 数据表格 -->
        <el-table
          v-loading="loading"
          :data="logList"
          @selection-change="handleSelectionChange"
        >
          <!-- 数据表格列 -->
          <el-table-column
            type="selection"
            width="50"
            align="center"
          />
          <el-table-column
            :label="$t('logmanage.logid')"
            align="center"
            prop="logId"
            width="50px"
          />
          <el-table-column
            :label="$t('logmanage.title')"
            align="center"
            prop="title"
            width="200px"
          />
          <!-- <el-table-column :label="$t('system_log_log_435')" align="center" prop="target" width="350px" /> -->
          <el-table-column
            :label="$t('logmanage.methodname')"
            align="center"
            prop="method"
            width="150px"
          />
          <el-table-column
            :label="$t('logmanage.type')"
            align="center"
            prop="businessType"
            width="80px"
          />
          <el-table-column
            :label="$t('logmanage.method')"
            align="center"
            prop="requestMethod"
            width="100px"
          />
          <el-table-column
           :label="$t('logmanage.requesturl')"
            align="center"
            prop="requestUrl"
          />
          <el-table-column
            :label="$t('logmanage.result')"
            align="center"
            prop="resultCode"
            width="80px"
          />
          <el-table-column
            :label="$t('logmanage.requester')"
            align="center"
            prop="requestBy"
            width="100px"
          />
          <el-table-column
            :label="$t('logmanage.requesttime')"
            align="center"
            prop="requestTimeString"
            width="250px"
          />
        </el-table>
        <!-- 数据分页加载 -->
        <el-pagination
          :current-page="pageNum"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @pagination="getList"
          style="margin-left:350px;margin-top:5px;"
        />
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
  /** 导入axios Api */
  import { listLogByPage, deleteLogByIds } from '@/api/system/log';
  import { mapGetters } from 'vuex';
  import {EventBus} from '@/eventbus/EventBus'
  export default {
    name: 'Log',
    data() {
      return {
        lang:null,
        languageparams:null,
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非选择禁用
        multiple: true,
        // 当前页
        pageNum: 0,
        // 每页数据量
        pageSize: 0,
        // Log表格数据
        logList: [],
        // 数据查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          title: undefined,
          businessType: undefined,
          requestMethod: undefined,
          resultCode: undefined
        },
        // 数据编辑表单
        form: {},
        // 表单数据校验规则
        rules: {
          logId: [
            { required: true, message: '日志主键不能为空', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '模块标题不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
    ...mapGetters(["language"])
  },
    created() {
      this.getList() 
  },
    beforeDestroy() {
      EventBus.$off('language-changed')
    },
    mounted() {
      EventBus.$on('language-changed', this.handleLanguageChange); 
    //   EventBus.$on('language-changed', lang => {
    //     this.handleLanguageChange(lang);
    // })
    },
    methods: {
    initLanguage(lang){
      if(lang=='en_US'){
        this.languageparams = 'en'
      }
      else if (lang === 'zh_CNS') {  
        this.languageparams = null;  
      }
    },
      handleLanguageChange(lang) {  
        // console.log(lang)
      this.lang = lang; // 更新组件的lang数据  
            if (this.lang === 'en_US') {  
        this.languageparams = 'en';  
      } else if (this.lang === 'zh_CNS') {  
        this.languageparams = null;  
      }
      this.getList(); // 使用新的语言获取日志  
    },
      /** 查询Log数据列表 */
      getList() {
        this.loading = true
        this.initLanguage(this.language)
        listLogByPage(this.queryParams,this.languageparams).then((response) => {
            // console.log(response.data);
          this.logList = response.data.records
          this.total = Number.parseInt(response.data.total) 
          this.loading = false
        })
      },
      /** 处理分页 */
      handleSizeChange(val) {
        this.queryParams.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.getList()
      },
  
      /** 数据编辑对话框取消按钮 */
      cancel() {
        this.open = false
        this.resetForm()
      },
  
      /** 数据编辑表单清空 */
      resetForm() {
        this.form = {
          logId: undefined,
          title: undefined,
          target: undefined,
          method: undefined,
          businessType: undefined,
          requestMethod: undefined,
          requestUrl: undefined,
          resultCode: undefined,
          requestBy: undefined,
          requestTimeString: undefined
        }
      },
      
      /** 重置分页 */
      resetQueryParams() {
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = 5
      },
  
      /** 数据筛选搜索按钮 */
      handleQuery() {
        this.resetQueryParams()
        this.getList()
        this.$message.success('查询成功')
      },
  
      /** 数据筛选重置按钮 */
      resetQuery() {
        this.$refs.queryForm.resetFields()
        this.getList()
      },
  
       // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.logId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      
      /** 删除按钮操作 */
      handleDelete() {
        deleteLogByIds(this.ids).then(response => {
          this.$message.success(response.msg)
          this.getList()
        })
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .form {
  border: 2px dashed rgb(211, 211, 211);
  padding: 20px;
  padding-bottom: 0px;
  margin: 10px 20px 20px 20px;
}
</style>